<template>
    <div class="app-container app-content">
        <el-form ref="ruleForm" :model="form" :rules="rules" label-width="120px">
            <el-row>
                <el-col :span="6" class="tab-title" :pull="2"> 地表破裂带评估参数设置 </el-col>
                <el-col>
                  <span class="labelName">1、确定发震断层:</span>
                </el-col>
                <el-col>
                      <p class="content">震中25公里范围内按断层倾角做投影，震中按震源深度做投影，计算两者投影点距离，两者投影点距离在<el-form-item label-width="0px" prop="projectionPointDistance" style="display: inline-block;"><el-input-number :precision="1" v-model="form.projectionPointDistance" controls-position="right" style="width: 150px;" /></el-form-item>km以内，</p>
                      <p class="content">如果仍有多条断层，则继续判断，断层按倾斜面(倾斜面是用倾角和断层的长度和深度来计算)两侧<el-form-item label-width="0px" prop="projectionPointDistance" style="display: inline-block;"><el-input-number :precision="1" v-model="form.slopeDistance" controls-position="right" style="width: 150px;" /></el-form-item>km以内得到长方体的历史地震最多的作为发震构造。</p>
                </el-col>
                <el-col>
                  <span class="labelName">2、地表破裂终止位置:</span>
                </el-col>
                <el-col>
                      <p class="content">M≥8.0级，先存断裂阶区宽度大于<el-form-item label-width="0px" prop="projectionPointDistance" style="display: inline-block;"><el-input-number :precision="1" v-model="form.earthQuake8Width" controls-position="right" style="width: 150px;" /></el-form-item>km停止破裂;</p>
                      <p class="content">8.0>M≥7.5级，先存断裂阶区宽度大于<el-form-item label-width="0px" prop="projectionPointDistance" style="display: inline-block;"><el-input-number :precision="1" v-model="form.earthQuake758Width" controls-position="right" style="width: 150px;" /></el-form-item>km停止破裂;</p>
                      <p class="content">7.5>M≥7.0级，先存断裂阶区宽度大于<el-form-item label-width="0px" prop="projectionPointDistance" style="display: inline-block;"><el-input-number :precision="1" v-model="form.earthQuake775Width" controls-position="right" style="width: 150px;" /></el-form-item>km停止破裂;</p>
                      <p class="content">7>M≥6.5级，先存断裂阶区宽度大于<el-form-item label-width="0px" prop="projectionPointDistance" style="display: inline-block;"><el-input-number :precision="1" v-model="form.earthQuake657Width" controls-position="right" style="width: 150px;" /></el-form-item>km停止破裂;</p>
                </el-col>
                <el-col>
                  <el-button type="primary" @click="submit">保存</el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script setup name="parameterSettings">
import {getParam, saveParam } from "@/api/parameterSettings.js"
import { onMounted } from "vue";
const { proxy } = getCurrentInstance();
const data = reactive({
    form :{
        projectionPointDistance: 3.0, //投影点距离
        slopeDistance: 3.0, //倾斜面距离
        earthQuake8Width: 5.0, //M≥8.0级， 先存断裂阶区宽度
        earthQuake758Width: 5.0, //8.0＞M≥7.5级，先存断裂阶区宽度
        earthQuake775Width: 5.0, //7.5＞M≥7.0级，先存断裂阶区宽度
        earthQuake657Width: 5.0, //7＞M≥6.5级，先存断裂阶区宽度
    },
    rules : {
        projectionPointDistance: [{ required: true, trigger: "blur", message: "请输入参数" }],
        slopeDistance: [{ required: true, trigger: "blur", message: "请输入参数" }],
        earthQuake8Width: [{ required: true, trigger: "blur", message: "请输入参数" }],
        earthQuake758Width: [{ required: true, trigger: "blur", message: "请输入参数" }],
        earthQuake775Width: [{ required: true, trigger: "blur", message: "请输入参数" }],
        earthQuake657Width: [{ required: true, trigger: "blur", message: "请输入参数" }],
    }
})
const {form,rules} = toRefs(data);

/** 提交按钮 */
function submit() {
  proxy.$refs.ruleForm.validate(valid => {
    if (valid) {
        let query = {
            projectionPointDistance: form.value.projectionPointDistance, 
            slopeDistance: form.value.slopeDistance,
            earthQuake8Width: form.value.earthQuake8Width,
            earthQuake758Width: form.value.earthQuake758Width,
            earthQuake775Width: form.value.earthQuake775Width,
            earthQuake657Width: form.value.earthQuake657Width,
        }
        saveParam(query).then(res=>{
            getData();
            proxy.$modal.msgSuccess("保存成功");
        })
    }
  });
};

// 获取参数
function getData (){
    getParam().then(res=>{
        form.value = res.data;
    })
}

onMounted(()=>{
    getData()
})
</script>

<style lang="scss" scoped>
.app-content{
    margin: auto 10%;
}
.tab-title {
  font-size: 18px;
  font-weight: bold;
  border-left: 6px solid var(--el-color-primary);
  font-family: PingFangSC-Medium;
  padding-left: 10px;
  margin-bottom: 20px;
}
.labelName{
    font-size: 16px;
    font-weight: bold;
}
</style>